import { useState, useCallback } from "react";
import styled from "./index.module.less";

import {
  Icon,
  Grid,
  LegacyCard,
  CalloutCard,
  Badge,
  Button,
  Thumbnail,
  TextField,
  Select,
  ChoiceList,
} from "@shopify/polaris";
import {
  MobileBackArrowMajor,
  FulfillmentFulfilledMajor,
} from "@shopify/polaris-icons";
import { useNavigate } from "react-router-dom";
import FileUpload from "../../../../components/FlieUpload";

const App = () => {
  const navigate = useNavigate();
  const [number, setNumber] = useState(1);

  const [value, setValue] = useState("1");

  const handleChange = useCallback((newValue: string) => {
    if (Number(newValue) > 0 && Number(newValue) <= 1) {
      setValue(newValue);
    } else if (Number(newValue) > 1) {
      setValue("1");
    } else {
      setValue("0");
    }
  }, []);

  const [selected, setSelected] = useState("WZ");

  const handleSelectChange = useCallback(
    (value: string) => setSelected(value),
    []
  );

  const options = [
    { label: "未知", value: "WZ" },
    { label: "尺寸过小", value: "CCGX" },
    { label: "尺寸过大", value: "CCGD" },
    { label: "客户改变了主意", value: "KHGBLZY" },
    { label: "商品与描述不符", value: "SPYMSBF" },
    { label: "收到了错误的商品", value: "SDLCWDSP" },
    { label: "已损坏或有缺陷", value: "YSHHYQX" },
    { label: "样式", value: "STYLE" },
    { label: "颜色", value: "COLOR" },
    { label: "其他", value: "QT" },
  ];
  //
  const [valueYY, setValueYY] = useState("");

  const handleChangeYY = useCallback(
    (newValue: string) => setValueYY(newValue),
    []
  );

  //
  const [selectedTH, setSelectedTH] = useState<string[]>(["scthbq"]);

  const handleChangeTH = useCallback(
    (value: string[]) => setSelectedTH(value),
    []
  );

  //
  const [valueYDH, setValueYDH] = useState("");

  const handleChangeYDH = useCallback(
    (newValue: string) => setValueYDH(newValue),
    []
  );
  //
  const [valueYSCYS, setValueYSCYS] = useState("");

  const handleChangeYSCYS = useCallback(
    (newValue: string) => setValueYSCYS(newValue),
    []
  );

  //
  const [expanded, setExpanded] = useState(false);

  //URL
  const [valueURL, setValueURL] = useState("");

  const handleChangeURL = useCallback(
    (newValue: string) => setValueURL(newValue),
    []
  );

  return (
    <div className={styled.Box}>
      <div className={styled.box}>
        <div className={styled.Top}>
          <div
            className={styled.IconS}
            onClick={() => {
              window.history.back();
            }}
          >
            <Icon source={MobileBackArrowMajor}></Icon>
          </div>
          <div className={styled.THCP}>退货产品</div>
        </div>
        <Grid>
          <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 12, xl: 8 }}>
            <CalloutCard
              title={
                <div className={styled.ZZTH}>
                  <div>自助退货</div>
                  <div style={{ marginLeft: "5px" }}>
                    <div className={styled.XJrdf}>新建</div>
                  </div>
                </div>
              }
              illustration="https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg"
              primaryAction={{ content: "前往自助退货" }}
              onDismiss={() => {}}
            >
              <p className={styled.title}>
                客户现在可在其账户中提交退货申请，而无需给您发送电子邮件或打电话。这可简化您的退货流程并节省您的时间。
              </p>
            </CalloutCard>
            <LegacyCard sectioned>
              <div className={styled.Topheader}>
                <div className={styled.YFHSAW}>
                  <div className={styled.YFH}>
                    <div>
                      <Icon
                        source={FulfillmentFulfilledMajor}
                        color="success"
                      ></Icon>
                    </div>
                    <div>已发货 (1)</div>
                  </div>
                  <div className={styled.fhuid}>#1001-F1</div>
                </div>
                <div className={styled.titleTPOJHG}>
                  Huaqiao room 1706, DaQiao Road 1
                </div>
              </div>
              <div className={styled.BORDER}>
                <div className={styled.UGBJD}>
                  <div style={{ display: "flex" }}>
                    <div>
                      <Thumbnail
                        source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"
                        size="small"
                        alt="Black choker necklace"
                      />
                    </div>
                    <div style={{ paddingLeft: "10px" }}>啊啊</div>
                  </div>
                  <div style={{ display: "flex" }}>
                    <div style={{ paddingRight: "10px" }}>0千克</div>
                    <div style={{ position: "relative" }}>
                      <TextField
                        label=""
                        type="number"
                        value={value}
                        onChange={handleChange}
                        autoComplete="off"
                      />
                      <div
                        style={{
                          position: "absolute",
                          top: "8px",
                          right: "80px",
                          zIndex: "999999",
                        }}
                      >
                        /{number}
                      </div>
                    </div>
                  </div>
                </div>
                <div style={{ marginTop: "12px", display: "flex" }}>
                  <div style={{ flex: "1" }}>
                    <Select
                      label={
                        <div style={{ fontSize: "13px" }}>选择退货原因</div>
                      }
                      options={options}
                      onChange={handleSelectChange}
                      value={selected}
                    />
                  </div>
                  {selected == "QT" && (
                    <div style={{ flex: "1", marginLeft: "10px" }}>
                      <TextField
                        label="原因"
                        value={valueYY}
                        onChange={handleChangeYY}
                        autoComplete="off"
                      />
                    </div>
                  )}
                </div>
              </div>
            </LegacyCard>
            <div className={styled.VFTUM}>
              <div className={styled.thysbq}>退货运输选项</div>
              <div className={styled.Children}>
                <div>
                  <ChoiceList
                    title=""
                    choices={[{ label: "上传运输选项", value: "scthbq" }]}
                    selected={selectedTH}
                    onChange={handleChangeTH}
                  />
                </div>
                {selectedTH[0] == "scthbq" && (
                  <div>
                    <div style={{ margin: "8px 0" }}>
                      {!expanded && <FileUpload />}
                      {expanded && (
                        <div>
                          <TextField
                            label="退货标签 URL"
                            value={valueURL}
                            onChange={handleChangeURL}
                            autoComplete="off"
                          />
                        </div>
                      )}
                    </div>
                    <div style={{ marginTop: "10px" }}>
                      <Button plain onClick={() => setExpanded(!expanded)}>
                        {expanded ? "或上传退货标签文件" : "或添加退货标签 URL"}
                      </Button>
                    </div>
                    <div style={{ display: "flex", marginTop: "10px" }}>
                      <div style={{ flex: "1" }}>
                        <TextField
                          label="运单号"
                          value={valueYDH}
                          onChange={handleChangeYDH}
                          autoComplete="off"
                        />
                      </div>
                      <div style={{ flex: "1", marginLeft: "10px" }}>
                        <TextField
                          label="运输承运商"
                          value={valueYSCYS}
                          onChange={handleChangeYSCYS}
                          autoComplete="off"
                        />
                      </div>
                    </div>
                  </div>
                )}
              </div>
              <div className={styled.Childrens}>
                <div>
                  <ChoiceList
                    title=""
                    choices={[{ label: "无需运输", value: "noys" }]}
                    selected={selectedTH}
                    onChange={handleChangeTH}
                  />
                </div>
              </div>
            </div>
          </Grid.Cell>
          <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 12, xl: 4 }}>
            <LegacyCard sectioned>
              <div>
                <div className={styled.zaiyao}>摘要</div>
                <div className={styled.BUYII}>
                  <div className={styled.DDDDD}></div>
                  <div className={styled.THYJCP}>退回 1 件产品</div>
                </div>
                <div className={styled.BUYII}>
                  <div className={styled.ooojo}></div>
                  <div className={styled.YYYS}>原因:样式</div>
                </div>
                <div style={{ marginTop: "15px" }}>
                  {Number(value) > 0 ? (
                    <Button size="slim" primary fullWidth>
                      创建退货
                    </Button>
                  ) : (
                    <Button size="slim" primary fullWidth disabled>
                      创建退货
                    </Button>
                  )}
                </div>
              </div>
            </LegacyCard>
          </Grid.Cell>
        </Grid>

        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "60px",
          }}
        >
          <div>详细了解</div>
          <div>
            <Button plain> 创建退货</Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;
